<style>
    .page-header small {
        margin-top: 15px;
        font-size: 13px;
    }
</style>
<div id="content-container" class="container">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default panel-recharge">
                <div class="panel-body">
                    <h2 class="page-header">VIP记录 <span><small class="pull-right text-danger">
                        {if $vipInfo}
                        当前VIP：{$vipInfo.name} <span data-toggle="tooltip" data-title="到期时间：{$vipInfo.expiredate}"><i class="fa fa-info-circle"></i></span>
                        {else/}
                        当前VIP：无
                        {/if}
                    </small></span></h2>
                    {volist name='recordList' id='record'}
                    <div class="row">
                        <div class="col-md-8">
                            <h4 style="margin-top:0;">
                                {$record.vip.name}
                            </h4>
                            <!--<p class="text-muted">等级：{$record.level}</p>-->
                            <p class="text-muted">过期时间：{$record.expiretime|datetime}</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <a href="javascript:" class="btn btn-{:$record.status=='active'?'success':($record.status=='locked'?'warning':'default')}">{$record.status_text}</a>
                        </div>
                    </div>
                    <hr>
                    {/volist}
                    {if $recordList->isEmpty()}
                    <p class="text-center">暂无记录</p>
                    {/if}
                    <div class="pager">{$recordList->render()}</div>
                </div>
            </div>
        </div>
    </div>
</div>
